<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      #containner {
        position: relative;
        width: 1500px;
        height: 2000px;
        border: 3px solid red;
        background-color: gray;
      }
      div {
        position: relative;
        float: left;
        color: blue;
        border: 1px solid yellow;

        width: 100px;
        height: 100px;
        background-color: red;
      }

      #translate {
        position: relative;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        /* 以原始方向坐标轴为基准 进行xy轴平移 */
        transform: translate(200px, 200px);
      }

      #translate_rotate {
        position: absolute;
        left: 0px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        /* 先平移再旋转:旋转是平移之后位置为原点进行旋转*/
        transform: translate(200px, 200px) rotate(45deg);
      }

      #rotate_translate {
        position: absolute;
        left: 0px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;

        /* 先旋转再平移 :旋转是以初始位置为原点进行旋转*/
        transform: rotate(45deg) translate(200px, 200px);
      }

      #translate_scale {
        position: absolute;
        left: 8px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        /* 先平移再缩放:缩放是以平移后中心点为基准点进行缩放*/
        transform: translate(400px, 0px) scale(2, 2);
      }

      #scale_translate {
        position: absolute;
        left: 8px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        /* 先缩放再平移:(大于1)平移距离会乘以缩放倍数*/
        transform: scale(2, 1) translate(400px, 0px);
      }
      #skewX {
        position: absolute;
        left: 0px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        background-image: url("/staticResource/image/logo.gif");
        transform: translate(500px, 200px) skewX(30deg);
      }
      #skewY {
        position: absolute;
        left: 0px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        background-image: url("./image/logo.gif");
        transform: translate(500px, 300px) skewY(30deg);
      }
      #skewXY {
        position: absolute;
        left: 0px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        background-image: url("/staticResource/image/logo.gif");
        transform: translate(500px, 500px) skew(30deg, 30deg);
      }

      #matrix {
        position: absolute;
        left: 0px;
        top: 100px;
        clear: both;
        width: 100px;
        height: 100px;
        background-color: red;
        background-image: url("/staticResource/image/logo.gif");
        transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
      }
    </style>
  </head>
  <body>
    <div id="containner">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>

      <div id="translate"><p>使用translate函数改变x,y轴坐标距离</p></div>
      <!-- <div id="translate_rotate"><p>先平移再旋转</p></div>
      <div id="rotate_translate"><p>先旋转再平移</p></div> -->
      <!-- <div id="translate_scale"><p>先平移再缩放</p></div>
      <div id="scale_translate"><p>先缩放再平移</p></div> -->
      <div id="skewX"><p>沿着X轴倾斜</p></div>
      <div id="skewY"><p>Y轴倾斜</p></div>
      <div id="skewXY"><p>同时沿着XY倾斜</p></div>
      <div id="matrix">矩阵(旋转 拉伸 平移)</div>
    </div>
  </body>
</html>
